<template>
  <div class="wrapper">
    <!-- 顶部导航栏 -->
    <div class="card">
      <div v-if="pageIndex === 0">
        <div class="flex-row">
          <div style="flex:1;" />
          <el-button type="primary" @click="pageIndex=1">新增班级</el-button>
        </div>
      </div>
      <div v-if="pageIndex === 1">
        <el-page-header content="新增班级" @back="goBack" />
      </div>
    </div>
    <!-- 首页 -->
    <div v-if="pageIndex === 0" class="card">
      <el-table :data="homePage. myClassTableData" border style="width: 100%;">
        <el-table-column v-for="item in homePage.tableHead" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" />
        <el-table-column label="操作" width="192">
          <template slot-scope="{ row }">
            <el-button-group>
              <el-button type="primary" icon="el-icon-view" @click="true===row" />
              <el-button type="primary" icon="el-icon-edit" @click="pageIndex=1" />
              <el-button type="primary" icon="el-icon-delete" @click="true" />
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 跳转页 -->
    <div v-if="pageIndex === 1" class="narrow-card">
      <el-row :gutter="50">
        <el-col :span="12">
          <el-input v-model="searchData" style="width:300px;margin:0 10px 0 0" class="input-width" maxlength="16" placeholder="输入要搜索的学生姓名" />
          <!-- <el-button style="margin:10px auto 0 auto;" type="primary" @click="true">搜 索</el-button> -->
          <div>
            <el-checkbox v-model="classAddStuData.checkAll" style="margin:12px 0 10px 0;" :indeterminate="classAddStuData.isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
          </div>
          <el-checkbox-group v-model="classAddStuData.checkedUser" @change="handleCheckedCitiesChange">
            <p v-for="item in userData" :key="item.u_id" style="margin:0 0 10px 0;">
              <el-checkbox v-show="(searchData==='')?true:((item.u_name.indexOf(searchData)!==-1)?true:false)" :label="item.u_id">{{ item.u_name }}</el-checkbox>
            </p>
          </el-checkbox-group>
        </el-col>

        <el-col :span="12">
          <div style="margin:10px">班级名称：</div>
          <el-input v-model="classAddStuData.calssName" style="width:300px;margin:0 10px 0 0" class="input-width" maxlength="16" placeholder="请输入班级名称" />
          <div>
            <el-button style="margin:10px auto 0 auto;" type="primary" @click="true">保 存</el-button>
          </div>
        </el-col>
      </el-row>
      <el-divider />
    </div>
    <div v-if="pageIndex === 2" class="narrow-card">
      <el-transfer v-model="classAddStuData.studentListvalue" :data="classAddStuData.studentListData" :titles="[classAddStuData.calssName, '所有学生']" :button-texts="['添加到此班', '移除']" />
    </div>
  </div>
</template>

<script>
import { getAllUser } from '@/api/user'
import { mapGetters } from 'vuex'

export default {

  name: 'TchTest',
  data() {
    return {
      isLoading: false, // 页面正在加载
      pageIndex: 0, // 页面索引
      userData: [], // 学生列表
      searchData: '', // 搜索学生
      homePage: {
        tabsActiveName: '0',
        tableHead: [
          { prop: 'c_name', label: '班级名称', width: '' },
          { prop: 'admin', label: '班主任', width: '' },
          { prop: 'c_count', label: '班级人数', width: '' },
          { prop: 'create_time', label: '班级人数', width: '' }
        ],
        myClassTableData: [
          { c_name: '诗词鉴赏兴趣班', admin: 'admin3', c_count: '7', create_time: '2021年05月16日 00:50:42' },
          { c_name: '计算机17级1班', admin: 'admin3', c_count: '7', create_time: '2021年05月16日 00:37:29' }

        ]

      }, // 首页数据
      classAddStuData: {
        checkAll: false, // 选中所有学生
        checkedUser: [], // 选中的学生
        isIndeterminate: true,
        calssName: '17计算机1班',
        // label: `备选项 ${ i }`
        studentListData: [
          { key: '1', label: `张小明(ID:3)` },
          { key: '2', label: `herry(ID:12)` },
          { key: '3', label: `黄兴(ID:16)` },
          { key: '4', label: `王洋(ID:21)` },
          { key: '5', label: `Yamada Aoi(ID:14)` },
          { key: '我的', label: `富田武(ID:15)` },
          { key: '7', label: `张小明(ID:3)` },
          { key: '8', label: `黄大(ID:23)` },
          { key: '9', label: `黄二(ID:22)` },
          { key: '10', label: `黄三(ID:3)` },
          { key: '11', label: `张无极(ID:31)` },
          { key: '12', label: `张萨(ID:38)` },
          { key: '13', label: `张小明(ID:3)` },
          { key: '7341', label: `张小明(ID:3)` },
          { key: '743214', label: `张小明(ID:3)` },
          { key: '72341', label: `张小明(ID:3)` },
          { key: '12347', label: `张小明(ID:3)` }
        ],
        studentListvalue: ['7', '我的']

      } // 添加学生到班级页面数据

    }
  },
  computed: {
    ...mapGetters(['name', 'avatar', 'roles'])
  },
  created: function() {
    this.getUserData()
  },
  methods: {
    handleCheckAllChange(val) {
      console.log('输出', val)
      if (val) {
        this.classAddStuData.checkedUser = []
        for (let i = 0; i < this.userData.length; i++) {
          this.classAddStuData.checkedUser.push(this.userData[i].u_id)
        }
      } else {
        this.classAddStuData.checkedUser = []
      }
      this.classAddStuData.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.classAddStuData.checkAll = checkedCount === this.classAddStuData.checkedUser.length
      this.classAddStuData.isIndeterminate = checkedCount > 0 && checkedCount < this.userData.length
    },
    /**
     * 获取学生列表
     */
    async getUserData() {
      this.isLoading = true
      const callback = await getAllUser()
      this.userData = callback.data
      this.isLoading = false
    },
    /**
     * 返回到起始页
     */
    goBack() {
      this.pageIndex = 0
    },
    /**
    * 给table每格rows加上属性
    */
    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex
    },
    /**
     * 点击了某一行
     */
    onRowClick(row) {
      console.log(row.row_index)
    }
  }
}
</script>

<style scoped>
.wrapper {
  background-color: #e6e6e6;
  padding: 10px;
  min-height: calc(100vh - 84px);
}
.card {
  background-color: #fff;
  padding: 24px;
  margin-bottom: 10px;
}
.narrow-card {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 24px;
}
.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
</style>
